<template>
  <div>
    <div class="nav-bar">
      <div v-for="(tab, t) in tabTitles"
           :key="t"
           class="nav-item"
           @click="toggleTab(t)">
        <text :class="['nav-title', tabIndex === t && 'nav-title-active']">{{tab.title}}</text>
        <div :class="['nav-line', tabIndex === t && 'nav-line-active']"></div>
      </div>
    </div>

    <div class="container">
      <div ref="container-tab"
           class="container-tab"
           :style="{width: tabTitles.length * 750}">
        <list class="scroller">
          <cell>
            <vm-title title="入库单"
                      :margin-top="true"
                      right-text="更多单据"
                      @rightClick="moreDisForm"></vm-title>
          </cell>
          <cell v-if="showDisStatus">
            <vm-status empty-text="暂无入库单"
                       class="bg-white"
                       :type="disError ? 'error' : 'empty'"></vm-status>
          </cell>
          <cell v-else>
            <div class="td-row">
              <text class="td-serial text-muted">序号</text>
              <text class="td-text text-muted">收货单号</text>
              <text class="td-text text-muted">总额</text>
              <text class="td-text text-muted">配货时间</text>
              <text class="td-text text-muted">订单状态</text>
            </div>
          </cell>
          <cell v-for="(item, index) in disForm"
                :key="index">
            <div class="td-row"
                 @click="goDisForm(item)">
              <text class="td-serial">{{index + 1}}</text>
              <text class="td-text">{{item.dis_id}}</text>
              <text class="td-text">{{item.total_amount}}</text>
              <text class="td-text">{{item.disDate}}</text>
              <text :class="['td-text', item.shipStatusStyle]">{{item.shipStatus}}</text>
            </div>
          </cell>
          <cell>
            <vm-title title="农资库存"
                      :margin-top="true"
                      :show-arrow="false"></vm-title>
          </cell>
          <cell v-if="showDisStoreStatus">
            <vm-status empty-text="暂无农资库存"
                       class="bg-white"
                       :type="disStoreError ? 'error' : 'empty'"></vm-status>
          </cell>
          <cell v-else>
            <div class="td-row">
              <text class="td-text text-muted">物资名</text>
              <text class="td-text text-muted">规格</text>
              <text class="td-text text-muted">入库量</text>
              <text class="td-text text-muted">库存量</text>
              <text class="td-text text-muted">出库量</text>
            </div>
          </cell>
          <cell v-for="(item, index) in disStore"
                :key="index">
            <div class="td-row">
              <text class="td-text">{{item.goods_name}}</text>
              <text class="td-text">{{item.spec_name}}</text>
              <text class="td-text">{{item.store_amount_in}}</text>
              <text class="td-text">{{item.store_amount}}</text>
              <text class="td-text">{{item.store_amount_out}}</text>
            </div>
          </cell>
        </list>

        <list class="scroller">
          <cell>
            <vm-title title="出库单"
                      :margin-top="true"
                      right-text="新增出库单"
                      @rightClick="shipNew"></vm-title>
          </cell>
          <cell v-if="showShipStatus">
            <vm-status empty-text="暂无出库单"
                       class="bg-white"
                       :type="shipError ? 'error' : 'empty'"></vm-status>
          </cell>
          <cell v-else>
            <div class="td-row">
              <text class="td-serial text-muted">序号</text>
              <text class="td-text text-muted">出单号</text>
              <text class="td-text text-muted">总额</text>
              <text class="td-text text-muted">配货时间</text>
              <text class="td-text text-muted">订单状态</text>
            </div>
          </cell>
          <cell v-for="(item, index) in shipForm"
                :key="index">
            <div class="td-row"
                 @click="goShipForm(item)">
              <text class="td-serial">{{index + 1}}</text>
              <text class="td-text">{{item.ship_p_id}}</text>
              <text class="td-text">{{item.total_amount}}</text>
              <text class="td-text">{{item.shipDate}}</text>
              <text :class="['td-text', item.shipStatusStyle]">{{item.shipStatus}}</text>
            </div>
          </cell>
          <cell v-if="!showShipStatus">
            <text class="more-text"
                  @click="moreShipForm">更多出库单 &gt;</text>
          </cell>
          <cell>
            <vm-title title="农产品库存"
                      :margin-top="true"
                      :show-arrow="false"></vm-title>
          </cell>
          <cell v-if="showGoodStoreStatus">
            <vm-status empty-text="暂无农产品库存"
                       class="bg-white"
                       :type="goodStoreError ? 'error' : 'empty'"></vm-status>
          </cell>
          <cell v-else>
            <div class="td-row">
              <text class="td-text text-muted">物资名</text>
              <text class="td-text text-muted">规格</text>
              <text class="td-text text-muted">入库量</text>
              <text class="td-text text-muted">库存量</text>
              <text class="td-text text-muted">出库量</text>
              <!-- <text class="td-text text-muted">累积出库</text> -->
            </div>
          </cell>
          <cell v-for="(item, index) in goodStore"
                :key="index">
            <div class="td-row">
              <text class="td-text">{{item.goods_name}}</text>
              <text class="td-text">{{item.spec_name}}</text>
              <text class="td-text">{{item.store_amount_in}}</text>
              <text class="td-text">{{item.store_amount}}</text>
              <text class="td-text">{{item.store_amount_out}}</text>
              <!-- <text class="td-text">{{item.store_amount_out}}</text> -->
            </div>
          </cell>
        </list>
      </div>
    </div>

  </div>
</template>
<script>
import VmButton from '../../components/vm-button.vue'
import VmTitle from '../../components/vm-title.vue'
import VmStatus from '../../components/vm-status.vue'
import { WxcTabPage, Utils } from 'weex-ui'
import { getStyles } from '../../plugins/tab-page-styles'
import {
  STORAGE_FARM
} from '../../plugins/constant'
import {
  enumShipStatus,
  enumShipStatusStyle,
  CATEGORY_MEANS,
  CATEGORY_GOODS
} from '../../plugins/enumChick'
const animation = weex.requireModule('animation')

export default {
  components: { VmButton, VmTitle, WxcTabPage, VmStatus },
  props: {},
  data() {
    return {
      tabIndex: 0,
      tabTitles: [
        { title: '农资品' },
        { title: '鸡产品' }
      ],
      tabStyles: getStyles(),
      tabPageHeight: 1334,
      //
      farm: {},
      // 入库单
      disLoading: false,
      disForm: [],
      disError: false,
      // 农资库存
      disStoreLoading: false,
      disStore: [],
      disStoreError: false,
      // 出库单
      shipForm: [],
      shipError: false,
      // 农产品库存
      goodStore: [],
      goodStoreError: false
    }
  },
  computed: {
    showDisStatus() {
      return !this.disLoading && (this.disError || !this.disForm.length)
    },
    showDisStoreStatus() {
      return !this.disStoreLoading && (this.disStoreError || !this.disStore.length)
    },
    showShipStatus() {
      return this.shipError || !this.shipForm.length
    },
    showGoodStoreStatus() {
      return this.goodStoreError || !this.goodStore.length
    }
  },
  watch: {},
  eros: {
    beforeBackAppear(params) {
      if (!params) { return }
      if (params.type === 1) {
        this.getDisForm()
        this.getDisStore()
        return
      }
      if (params.type === 2) {
        this.getShipForm()
        this.getGoodStore()
        return
      }
    }
  },
  created() {
    this.tabPageHeight = Utils.env.getPageHeight()
    this.getFarm()
  },
  methods: {
    getFarm() {
      this.farm = this.$storage.getSync(STORAGE_FARM) || {}
      if (this.farm.id) {
        this.getDisForm()
        this.getDisStore()
        this.getShipForm()
        this.getGoodStore()
      } else {
        this.$notice.toast({ message: '没有鸡场信息' })
        this.$router.setBackParams({ type: 1 })
      }
    },
    // 入库单
    getDisForm() {
      this.disLoading = true
      this.$api.getData({
        server: 'agr_chain',
        table: 'dis_form_view',
        params: {
          index: 1,
          size: 10,
          'accept_id.eq': this.farm.id
          // 'approval_status.eq': 1
        },
        order: { create_time: 'desc' },
        errorMsg: '获取入库单失败'
      }).then(res => {
        this.disError = false
        const data = res && res.data || []
        this.disForm = data.map(item => {
          item.disDate = item.dis_date ? item.dis_date.substr(0, 10) : ''
          item.shipStatus = enumShipStatus[item.ship_status] || '其他'
          item.shipStatusStyle = enumShipStatusStyle[item.ship_status] || ''
          return item
        })
      }).catch(err => {
        this.disError = true
      }).finally(() => {
        this.disLoading = false
      })
    },
    moreDisForm() {
      this.$nav.open({ name: 'farm.dis' })
    },
    // 农资库存
    getDisStore() {
      this.disStoreLoading = true
      this.$api.getData({
        server: 'agr_chain',
        table: 'goods_store_view',
        params: {
          'own_org_id.eq': this.farm.id,
          'goods_category_id.endlike': CATEGORY_MEANS
        },
        errorMsg: '获取农资库存失败'
      }).then(res => {
        this.disStoreError = false
        const data = res || []
        this.disStore = data.map(item => {
          // 去除小数点
          item.store_amount = this.$utils.removeDecimalZero(item.store_amount)
          item.store_amount_in = this.$utils.removeDecimalZero(item.store_amount_in)
          item.store_amount_out = this.$utils.removeDecimalZero(item.store_amount_out)
          return item
        })
      }).catch(err => {
        this.disStoreError = true
      }).finally(() => {
        this.disStoreLoading = false
      })
    },
    // 入库单
    getShipForm() {
      this.$api.getData({
        server: 'agr_chain',
        table: 'ship_p_form_view',
        params: {
          index: 1,
          size: 10,
          'supplier_id.eq': this.farm.id
          // 'approval_status.eq': 1
        },
        order: { create_time: 'desc' },
        errorMsg: '获取出库单失败'
      }).then(res => {
        this.shipError = false
        const data = res && res.data || []
        this.shipForm = data.map(item => {
          item.shipDate = item.ship_p_date ? item.ship_p_date.substr(0, 10) : ''
          item.shipStatus = enumShipStatus[item.ship_status] || '其他'
          item.shipStatusStyle = enumShipStatusStyle[item.ship_status] || ''
          return item
        })
      }).catch(err => {
        this.shipError = true
      })
    },
    moreShipForm() {
      this.$nav.open({ name: 'farm.ship' })
    },
    shipNew() {
      this.$nav.open({ name: 'farm.ship.new' })
    },
    // 农产品库存
    getGoodStore() {
      this.$api.getData({
        server: 'agr_chain',
        table: 'goods_store_view',
        params: {
          'own_org_id.eq': this.farm.id,
          'goods_category_id.endlike': CATEGORY_GOODS
        },
        errorMsg: '获取农产品库存失败'
      }).then(res => {
        this.goodStoreError = false
        const data = res || []
        this.goodStore = data.map(item => {
          item.store_amount = this.$utils.removeDecimalZero(item.store_amount)
          item.store_amount_in = this.$utils.removeDecimalZero(item.store_amount_in)
          item.store_amount_out = this.$utils.removeDecimalZero(item.store_amount_out)
          return item
        })
      }).catch(err => {
        this.goodStoreError = true
      })
    },
    // 
    goDisForm(row) {
      this.$nav.open({
        name: 'farm.dis.form',
        params: { data: row }
      })
    },
    goShipForm(row) {
      this.$nav.open({
        name: 'farm.ship.form',
        params: { data: row }
      })
    },
    // tab
    toggleTab(index) {
      this.tabIndex = index
      this._animateTransformX(index)
    },
    _animateTransformX(index) {
      const containerEl = this.$refs[`container-tab`]
      if (!containerEl) { return }
      const dist = index * 750
      animation.transition(containerEl, {
        styles: {
          transform: `translateX(${-dist}px)`
        },
        duration: 200,
        timingFunction: 'cubic-bezier(0.25, 0.46, 0.45, 0.94)',
        delay: 0
      }, () => { })
    }
  }
}

</script>
<style lang="scss"
       scoped>
@import "../../css/variables.scss";

.scroller {
  width: 750px;
}
.flex-row {
  flex-direction: row;
}
.flex {
  flex: 1;
}
.border-bottom {
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.bg-white {
  background-color: #fff;
}
.text-muted {
  color: #999;
}
.text-info {
  color: $info;
}
.text-success {
  color: $success;
}
.text-error {
  color: $error;
}
.more-text {
  text-align: right;
  padding: 20px;
  font-size: 28px;
  background-color: #f8f9fa;
  color: #999;
}

.td-row {
  width: 750px;
  flex-direction: row;
  align-items: center;
  padding-top: 25px;
  padding-bottom: 25px;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.td-row:active {
  background-color: #eee;
}
.td-text {
  flex: 1;
  padding-left: 1px;
  padding-right: 1px;
  text-align: center;
  font-size: 25px;
}
.td-serial {
  width: 70px;
  text-align: center;
  font-size: 25px;
}

.nav-bar {
  flex-direction: row;
  background-color: #fff;
  border-bottom-width: 1px;
  border-bottom-color: $border-color;
}
.nav-item {
  flex: 1;
  align-items: center;
}
.nav-title {
  padding: 25px;
  lines: 1;
  color: #666;
  font-size: 30px;
  text-align: center;
}
.nav-title-active {
  color: #333;
  font-weight: bold;
}
.nav-line {
  height: 4px;
  width: 180px;
  border-bottom-width: 4px;
  border-bottom-color: transparent;
}
.nav-line-active {
  border-bottom-color: $accent;
}
.container {
  width: 750px;
  flex: 1;
}
.container-tab {
  flex: 1;
  flex-direction: row;
  align-items: stretch;
}
</style>
